<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>All experiments</title>
	<link rel="stylesheet" href="/static/jquery.ui.all.css">
	<link rel="stylesheet" href="/static/bootstrap.min.css">
	<script src="/static/jquery-1.10.2.js"></script>
	<script src="/static/jquery.ui.core.js"></script>
	<script src="/static/jquery.ui.widget.js"></script>
	<script src="/static/jquery.ui.accordion.js"></script>
	<script>
	$(function() {
	$("div.accordian").accordion({
	    heightStyle: "content",
	    autoHeight: false,
	    collapsible: true,
	    active: false,
		});
	});
	</script>
  </head> 
  <body>
	<div class="container">
      	<h2> {{ plategroup.groupname }}</h2>
      	<h3> {{ plategroup.plate_type }}</h3>
      	<h2>{{ plategroup.id }}</h2>

		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">Group QC</h3>
			</div>
			<div class="panel-body">
			<a class="btn btn-danger" href="/d/group/{{plategroup.id}}" onClick="return confirm('You sure??');" role="button"> Delete group</a>
			<a class="btn btn-info" href="/boxqc/?groupid={{plategroup.id}}" role="button"> Box plot with scatter plot</a>
			<a class="btn btn-info" href="/box_corr/?groupid={{plategroup.id}}" role="button"> Box plot with corr</a>
			</div>
		</div>	
		
		<div class="panel panel-info">
			<div class="panel-heading">
				<h3 class="panel-title">Group Action</h3>
			</div>
			<div class="panel-body">
			<a class="btn btn-info" href="/group_plates/?groupid={{plategroup.id}}" role="button"> Group plates into super plates</a>
			</div>
		</div>	


		<div class="accordian">	
    		{% for plate in plategroup.plates %}
      			<h2>Plate name: <a class=href="#">{{ plate.platename }} replicate: {{ plate.replicate }}</a></h2>
			<div>
      			<h2>Cell line used in this plate:</h2>
      			<p>{{ plate.cellline }}</p>
      			<h2>Plate condition:</h2>
      			<p>{{ plate.condition }}</p>
      			<h2>Plate concentration:</h2>
      			<p>{{ plate.concentration }}</p>
      			<h2>Plate dimension:</h2>
      			<p>{{ plate.dimension }}</p>

			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">Plate Action</h3>
				</div>
				<div class="panel-body">
				<a class="btn btn-danger" href="/d/plate/{{plate.id}}" onClick="return confirm('You sure??');" role="button"> Delete plate</a>
				<!--<a class="btn btn-info" href="#"  role="button"> Plate Z factor </a>-->
				</div>
			</div>	

			<div class="accordian">	
    			
      			<h2>Plate detail:</h2>
			<a href="/p/{{ plate.id }}">{{ plate.platename }}</a>
			</div>
		</div>
    		{% endfor %}
		</div>


</div>
</body>
</html>
